<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="名称" >
                  <el-input v-model="search.name"></el-input>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
         <el-button  type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
      <el-table-column prop="code" label="供应商编号" sortable min-width="100"></el-table-column>
      <el-table-column prop="name" label="供应商名字" sortable min-width="100" > </el-table-column>
      <el-table-column prop="contacts" label="联系人" sortable min-width="100" ></el-table-column>
      <el-table-column prop="phone" label="联系电话" sortable min-width="100"></el-table-column>
      <el-table-column prop="qualityMoney" label="质保金" sortable min-width="80"></el-table-column>
      <el-table-column prop="paymentMethodName" label="付款方式" sortable min-width="120"></el-table-column>
      <el-table-column prop="paymentPeriod" label="付款周期" sortable min-width="120"></el-table-column>
      <el-table-column prop="transporttationMethodName" label="运输方式" sortable min-width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" align="right"  width="100">
        <template slot-scope="scope">
          <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px" :close-on-click-modal="false">
      <h3 class="dialog-plate-title">基础信息</h3>
            <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="120px">
                <el-form-item label="供应商编号"><el-input v-model="dialog.formData.code" class="width220"></el-input></el-form-item>
                <el-form-item label="供应商名字"><el-input v-model="dialog.formData.name" class="width220"></el-input></el-form-item>
                <el-form-item label="联系人"><el-input v-model="dialog.formData.contacts" class="width220"></el-input></el-form-item>
                <el-form-item label="联系电话"><el-input v-model="dialog.formData.phone" class="width220"></el-input></el-form-item>
                <el-form-item label="地址"><el-input v-model="dialog.formData.address" class="width220"></el-input></el-form-item>
                <el-form-item label="传真"><el-input v-model="dialog.formData.fax" class="width220"></el-input></el-form-item>
                <el-form-item label="邮箱"><el-input v-model="dialog.formData.email" class="width220"></el-input></el-form-item>
                <el-form-item label="开户行"><el-input v-model="dialog.formData.openingBank" class="width220"></el-input></el-form-item>
                <el-form-item label="账户"><el-input v-model="dialog.formData.account" class="width220"></el-input></el-form-item>
                <el-form-item label="税号"><el-input v-model="dialog.formData.tax" class="width220"></el-input></el-form-item>
                <el-form-item label="质保金"><el-input v-model="dialog.formData.qualityMoney" class="width220"></el-input></el-form-item>
                <el-form-item label="付款方式">
                  <el-select v-model="dialog.formData.paymentMethod" placeholder="请选择付款方式" class="width220">
                    <el-option :label="item.name" :value="item.code" v-for="item in payTypeList" :key="item.label"></el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item label="预付款比例" v-show="dialog.formData.paymentMethod===1">
                     <el-input v-model="dialog.formData.advanceSum" class="width220"><el-button slot="append">%</el-button></el-input>
                </el-form-item>
                <el-form-item label="付款周期" v-if='dialog.formData.paymentMethod !==4'>
                    <el-input v-model="dialog.formData.paymentPeriod" class="width220" ><el-button slot="append" >天</el-button></el-input>
                </el-form-item>
                <el-form-item label="每月日期" v-else>
                    <el-input v-model="dialog.formData.paymentPeriod" class="width220" ><el-button slot="append" >号</el-button></el-input>
                </el-form-item>
                 <el-form-item label="运输方式">
                     <el-select v-model="dialog.formData.transporttationMethod" placeholder="请选择运输方式" class="width220" >
                        <el-option :label="item.name" :value="item.code" v-for="item in shippingMethodList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="场地面积"><el-input v-model="dialog.formData.siteSize" class="width220" ></el-input></el-form-item>
                <el-form-item label="人数"><el-input v-model="dialog.formData.peopleNums" class="width220" ></el-input></el-form-item>
                <el-form-item label="设备数量"><el-input v-model="dialog.formData.equipmentNums" class="width220" ></el-input></el-form-item>
                <el-form-item label="属性"><el-input v-model="dialog.formData.property" class="width220" ></el-input></el-form-item>
                <el-form-item label="关键工艺"><el-input v-model="dialog.formData.cruxCraft" class="width220" ></el-input></el-form-item>
                <el-form-item label="设计能力">
                    <el-select v-model="dialog.formData.isDesignAbility" placeholder="请选择" class="width220" >
                        <el-option :label="item.label" :value="item.value" v-for="item in isDesignAbilityList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发票类型">
                    <el-select v-model="dialog.formData.makeInvoiceType" placeholder="请选择发票类型" class="width220" >
                        <el-option :label="item.name" :value="item.code" v-for="item in invoiceList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <h3 class="dialog-plate-title">供应商资质</h3>
            <el-row>
              <el-col :span="12" class="uploadPhoto">
             <!--  -->
                <el-upload class="avata-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
                  <img v-if="dialog.formData.businessLicensePhoto" :src="dialog.formData.businessLicensePhoto" class="avatar">
                  <i v-else class="el-icon-plus avata-uploader-icon">营业执照</i>
                </el-upload>
              </el-col>
              <el-col :span="12" class="uploadPhoto">
                <el-upload class="avata-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                  <img v-if="dialog.formData.taxPhoto" :src="dialog.formData.taxPhoto" class="avatar">
                  <i v-else class="el-icon-plus avata-uploader-icon">医疗许可证</i>
                </el-upload>
              </el-col>
              <el-col :span="12" class="uploadPhoto">
                <el-upload class="avata-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                  <img v-if="dialog.formData.openAcPhoto" :src="dialog.formData.openAcPhoto" class="avatar">
                  <i v-else class="el-icon-plus avata-uploader-icon">开户许可证</i>
                </el-upload>
              </el-col>
              <el-col :span="12" class="uploadPhoto">
                <el-upload class="avata-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload">
                  <img v-if="dialog.formData.referencePhoto" :src="dialog.formData.referencePhoto" class="avatar">
                  <i v-else class="el-icon-plus avata-uploader-icon">备案凭证</i>
                </el-upload>
              </el-col>
            </el-row>
              <div slot="footer" class="dialog-footer" style="text-align: center;">
                  <el-button @click="onSubmit" type="primary">确 定</el-button>
              </div>
    </el-dialog>
  </div>
</template>
<script>
import resourcesProtectionApi from 'plugins/axios/resourcesProtectionApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import {mapState} from 'vuex'
export default {
  components: {
  },
  data(){
    return {
      actionUrl:"",
      search:{
        name:''
      },
      loading:false,
      tableList:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog:{
        title:'',
        isShow:false,
        type:'',
        formData:{}
      },
      payTypeList:[],/** 付款方式列表*/
      shippingMethodList:[],/**运输方式列表 */
      invoiceList:[],/** 发票类型列表*/
      isDesignAbilityList:[
        {
          label:'有',
          value:'1'
        },
        {
          label:'无',
          value:'0'
        }
      ],/**设计能力列表 */
    }
  },
  created(){
    let self = this;
    baseApi.getCodeList('invoiceType').then(res=>{
      /**获取发票类型*/ 
      self.invoiceList = res.content;
    })
    baseApi.getCodeList('paymentMethod').then(res=>{
       /**获取付款方式列表*/ 
       res.content.forEach(element => {
        element.code = Number(element.code);
      });
      self.payTypeList= res.content;
    })
    baseApi.getCodeList('transporttationMethod').then(res=>{
       /**获取运输方式列表*/ 
       res.content.forEach(element => {
        element.code = Number(element.code);
      });
      self.shippingMethodList= res.content;
    })
  },
  mounted(){
    this.getTableList();
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    tableHeight(){
      return this.clientHeight-184;
    }
  },
  watch: {
  },
  methods:{
    getTableList(){
      let self = this;
      let data={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        name:self.search.name
      }
      resourcesProtectionApi.cgSupplierList(data).then(res=>{
        self.tableList = res.content.records;
        self.pagination.currentPage=res.content.current;
        self.pagination.pageSize=res.content.size;
        self.pagination.total=res.content.total;
      })
    },
    searchBtn(){
      this.getTableList()
    },
    handleCurrentChange(current){
      this.pagination.currentPage = current;
      this.getTableList();
    },
    handleSizeChange(size){
      this.pagination.pageSize = size;
      this.getTableList();
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type = type;
      self.dialog.isShow = true;
      self.actionUrl = resourcesProtectionApi.imageUpload();
      switch(type){
        case 'insert':
          self.dialog.title = '新增供应商信息'
          self.dialog.formData={}
          break;
        case 'update':
          self.dialog.title = '修改供应商信息'
          self.dialog.formData=JSON.parse(JSON.stringify(row));
          break;
      }
     
    },
    onSubmit(){
      let self = this;
      resourcesProtectionApi.insertUpdateSupplier(self.dialog.type,self.dialog.formData).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow = false;
        self.getTableList();
      })
    },
    beforeAvatarUpload(file){/**图片上传前图片大小验证*/
      const isJPG = file.type.substr(0,5) === 'image';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error('只能上传图片!');
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt10M
    },
    handleAvatarSuccess1(response, file, fileList){
      console.log(response)
      this.dialog.formData.businessLicensePhoto = response.content;
    },
    handleAvatarSuccess2(response, file, fileList){
      console.log(response)
      this.dialog.formData.taxPhoto = response.content;
    },
    handleAvatarSuccess3(response, file, fileList){
      console.log(response)
      this.dialog.formData.openAcPhoto = response.content;
    },
    handleAvatarSuccess4(response, file, fileList){
      console.log(response)
      this.dialog.formData.referencePhoto = response.content;
    }

  }
}
</script>
<style lang="stylus" scoped>
/**照片上传*/
.uploadPhoto
  height 200px
  overflow  hidden
  padding 10px 24px
  box-sizing border-box
  .avata-uploader
    height 100%;
    text-align center
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
    &:hover
      border-color $theme-color
    .el-upload
      display block
      width 100%
      height 100%
      .el-icon-plus
        display block
        box-sizing border-box
        padding-top 80px
        &:before
          display block
          font-size 24px
    .avatar
      max-width 100%
      max-height 180px 
      display block
</style>